<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.box{
			width: 600px;
			height: 1200px;
			border: 1px solid #000;
			margin: 50px auto;
		}
		.box form input{
			width: 300px;
			height: 40px;
			line-height: 40px;
			display: block;
			margin: 0 auto;
			margin-top: 12px;
		}
		.box form input[type=submit]{
			width: 80px;
			height: 36px;
		}
		.box table{
			width: 500px;
			margin: 0 auto;
			text-align: center;
		}
		.box table th{
			background: #eee;
		}
		.box table td{
			height: 40px;
			line-height: 40px;
		}
	</style>
</head>
<body>
	<div class="box">
		<form action="">
			<input type="text" placeholder="请输入您的名字" class="name"><br>
			<input type="text" placeholder="请输入您的电话" class="tel"><br>
			<input type="text" placeholder="请输入您的邮箱" class="email"><br>
			<input type="submit" value="保存" class="save">
		</form>
		<table border="1" cellspacing="0">
			<thead>
				<tr>
					<th>姓名</th>
					<th>电话</th>
					<th>邮箱</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</div>
</body>
<script src="jquery-2.2.0.min.js"></script>
<script>
	$(function(){
		$("table .save").on("click",function(e){
			e.preventDefault;
			var obj={
				name:$(".name").val(),
				tel:$(".tel").val(),
				email:$(".email").val()
			}
			var all=localStorage.getItem("list")
			console.log(all)
			if(all){
				all=JSON.parse(all);
				all.push(obj);
				localStorage.setItem("list",JSON.stringify(all))
			}else{
				localStorage.setItem("list",JSON.stringify([obj]))
			}
			//渲染表格
			//读取数据
			var str='<tr>'+
			'<td>'+obj.name+'</td>'+
			'<td>'+obj.tel+'</td>'+
			'<td>'+obj.email+'</td>'+
			'<td>'+
			'<button class="btnDelete">删除</button>'+
			'<button class="btnEdit">修改</button>'
			+'</td>'+
			'</tr>'
			$("table tbody").append(str)
		})
		//将localstorage中的数据渲染到表格上
		getAll();
		function getAll(){
			var all=localStorage.getItem("list");
			all=JSON.parse(all)
			for(var i=0;i<all.length;i++){
					var str='<tr>'+
				'<td>'+all[i].name+'</td>'+
				'<td>'+all[i].tel+'</td>'+
				'<td>'+all[i].email+'</td>'+
				'<td>'+
				'<button class="btnDelete">删除</button>'+
				'<button class="btnEdit">修改</button>'
				+'</td>'+
				'</tr>'
				$("table tbody").append(str)
				}
		}
		//删除
		$("table").on("click","btnDelete",function(){
			var tr=$(this).parent().parent();
			var all=localStorage.getItem("list")
			all=JSON.parse(all)
			all.splice(tr.index(),1)
			localStorage.setItem("list",JSON.stringify(all))
			tr.remove();
		})
	})
</script>
</html>